<template>
	<view class='coupon'>
		<view class="screenCondition dFlex jAround_aCenter">
			<view :class="['conditionOne',use_status == '4'?'actScreen':'']" @click="use_status = '4';initCouponList(4)">
				<text>待领取</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
			<view :class="['conditionOne',use_status == '1'?'actScreen':'']" @click="use_status = '1';initCouponList()">
				<text>未使用</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
			<view :class="['conditionOne',use_status == '2'?'actScreen':'']" @click="use_status = '2';initCouponList()">
				<text>已使用</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
			<view :class="['conditionOne',use_status == '3'?'actScreen':'']" @click="use_status = '3';initCouponList()">
				<text>已过期</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="cpList" v-if='cpList.length'>
			<view class="cpOne dFlex jBetween_aCenter" v-for="(item,index) in cpList" :key='item.id' >
				<view class="amount">
					<view class="amountBg imgPublic" v-if='use_status == "1" || use_status == "4"'>
						<image src="../static/images/wlqdjqbj@2x.png" mode="widthFix"></image>
					</view>
					<view class="amountBg imgPublic" v-if='use_status == "2"'>
						<image src="../static/images/ysydjqbj@2x.png" mode="widthFix"></image>
					</view>
					<view class="amountBg imgPublic" v-if='use_status == "3"'>
						<image src="../static/images/djqbj@2x.png" mode="widthFix"></image>
					</view>
					<view class="amountContent dFlex flexDirection jCenter_aCenter">
						<view class="showCount" v-if='item.type <= 1'>￥<text>{{item.sub_price}}</text></view>
						<view class="showCount" v-if='item.type == 4'><text>{{item.discount}}</text>折</view>
						<text v-if='item.type == 0'>无门槛券</text>
						<text v-if='item.type == 1'>满减券</text>
						<text v-if='item.type == 4'>折扣券</text>
					</view>
				</view>
				<view class="cpDesc dFlex jBetween_aCenter">
					<view class="explain">
						<view class="cpTit">{{item.title}}</view>
						<view class="condition" v-if='item.type == 1'>满{{item.min_price}}即可使用</view>
						<view class="time">{{item.start_time_text.split(' ')[0]}} ~ {{item.end_time_text.split(' ')[0]}}</view>
					</view>
					<view class="getBtn" v-if='use_status == "4"' @click="getCoupon(item.id)">领取</view>
					<view class="statusIcon imgPublic" v-if='use_status == "2"'>
						<image src="../static/images/ysy@2x.png" mode="widthFix"></image>
					</view>
					<view class="statusIcon imgPublic" v-if='use_status == "3"'>
						<image src="../static/images/ygq@2x.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
	</view>
</template>

<script>
	import {
		getMyCoupon,getCoupon
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				cpList:[],  // 0无门槛 1满减 4折扣券
				use_status:'4',//1未使用 2已使用 3已过期 4未领取
			};
		},
		onLoad(e) {
			this.initCouponList();
		},
		methods:{
			async initCouponList(){
				this.cpList = [];
				let res = await getMyCoupon({
					type:'-1',
					use_status:this.use_status,
				});
				console.log(res);
				if(res && res.length){
					this.cpList = res;
				}
			}, 
			// 领取优惠券
			async getCoupon(id){ 
				let res = await getCoupon({
					coupon_id:id,
				});
				if(res){
					uni.showToast({
						title:'领取成功',
						icon:'success',
					})
					this.initCouponList();
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.coupon{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.cpList{
			width: 100%;
			margin-top:12px;
			.cpOne{
				width: 100%;
				margin-bottom: 12px;
				background: white;
				border-radius: 4px;
				overflow: hidden;
				.cpDesc{
					flex: 1;
					padding:0 10px;
					box-sizing:border-box;
					.explain{
						flex:1;
						.condition{
							font-size: 12px;
							margin-top: 6px;
							color:#808080;
						}
						.time{
							font-size: 12px;
							margin-top: 15px;
							color:#808080;
						}
					}
					.statusIcon{
						width: 60px;
						height: 60px;
					}
					.getBtn{
						width: max-content;
						color:white;
						padding:3px 12px;
						font-size: 12px;
						border-radius: 50px;
						margin-left: 8px;
						background: #198AF2 linear-gradient(180deg, #3E8EF0 0%, #1362C9 100%);
					}
				}
				.amount{
					width:104px;
					position: relative;
					.amountContent{
						width:100%;
						height:100%;
						position: absolute;
						top: 0;
						left: 0;
						color:white;
						.showCount{
							font-weight: bold;
							text{
								font-size:20px;
							}
						}
					}
				}
			}
		}
		.screenCondition{
			padding-top:0;
		}
	}
</style>
